// import logo from '../assets/logo.svg';
import './App.css';
import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.setState({ date: new Date() }),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  handleClick(params) {
    console.log(params);
  }

  render() {
    let ifDemo = <span>true</span>

    if (true) {
      ifDemo = <span>false</span>
    }

    return ReactDOM.createPortal(
      <div>
        <h1 onClick={this.handleClick.bind(this, 111111)}>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
        {ifDemo}
      </div>,
      document.body
    );
  }
}

function App() {
  return (
    <Clock date={new Date()} />
  );
}

export default App;
